<template>
        <el-row :gutter="24">
            <el-col :span="4" v-for="star in star.items">
                <div class="name" @click="toStar(star.star_id)">
                    <div class="avatar">
                        <img :src="star.avatar"/>
                    </div>
                    <div class="info">
                        <el-row>
                            <el-col :span="18">
                                <label>{{star.name}}</label>
                            </el-col>
                            <el-col :span="6">

                            </el-col>
                        </el-row>
                        <el-row>
                            <label class="star-id">{{star.star_id}}</label>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>
</template>
<style lang="scss" scoped>


    .name {

        border:white solid 1px;

        &:hover {
            border:#E4E7ED dashed 1px;
            cursor: pointer;
        }



        display: flex;
        flex-direction: row;
        padding: 10px;
        label {
            padding: 10px 10px 10px 10px;
            font-size: 14px;
            &:hover {

                cursor: pointer;
            }
        }

        .star-id {
            color: gray;
            font-size: 5px;
            font-family: "Courier New";
            &:hover {

                cursor: pointer;
            }
        }
        .avatar {
            &:hover {

                cursor: pointer;
            }

            img {
                position: relative;
                display: inline-block;
                width: 40px;
                height: 40px;
                /*圆形显示*/
                border-radius: 50%;
                /*圆形显示*/
                background: rgba(255, 255, 255, 0.1);
                vertical-align: center;
                border: 2px solid gray;
            }
        }
    }
</style>
<script lang="ts">

    import {Vue, Component, Watch} from 'vue-property-decorator'
    import {
        AdminLabel
    } from '../layout'
    import {Api} from "../../api/stars";
    import AdminStarClubsView from './AdminStarClubsView'
    import AdminSyncClubsView from './AdminSyncClubsView'
    import AdminStarCleanView from './AdminStarCleanView'
    import AdminStarCleanWordsView from './AdminStarCleanWordsView'

    @Component({
        name: 'AdminStarsPage',
        components: {
            AdminLabel,
            AdminStarClubsView,
            AdminSyncClubsView,
            AdminStarCleanView,
            AdminStarCleanWordsView
        },
    })
    export default class AdminStarsPage extends Vue {

        star: Api.Stars.GetTopStarsResponse = {
            items:[],
        };


        loadView() {
            Api.Stars.GetTopStars({})
                .then((ack) => {
                    this.star = ack;
                });
        }

        mounted() {
            this.loadView()
        }

        toStar(star_id:any) {
            this.$router.push({
                path:`/stars/${star_id}`
            })
        }
    }
</script>

<style scoped>

</style>